<template>
  <div class="page">
    <!--  搜索条  -->
    <el-row style="padding-bottom: 10px;height: 42px">
      <el-col :span="6">
        <el-input placeholder="关键字搜索">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </el-row>

    <el-row style="height: calc(100% - 42px)">
      <!-- 按钮 -->
      <el-col :span="24" style="padding: 10px 0px 10px 0px;border-top: 1px solid #e4e7ed;height: 53px">
        <el-col :span="12">
          <el-button type="primary" icon="el-icon-edit-outline" @click="openAddDrawer">添加</el-button>
          <el-button type="primary" icon="el-icon-edit" @click="openUpdateDrawer"
                     :disabled="selectRows.length!==1">编辑
          </el-button>
          <el-button type="primary" icon="el-icon-info" @click="openDetailDrawer"
                     :disabled="selectRows.length!==1">详情
          </el-button>
          <el-button type="danger" icon="el-icon-delete" @click="onDelete" :disabled="selectRows.length===0">删除
          </el-button>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <slot name="btns"></slot>
          <el-button icon="el-icon-refresh" @click="loadTableData">刷新</el-button>
        </el-col>
      </el-col>
      <!-- 表格 -->
      <el-col :span="24" style="padding-bottom: 10px;height: calc(100% - 103px)">
        <t-table :data="tableData" @checkbox-all="selectChangeEvent"
                 @checkbox-change="selectChangeEvent">
          <vxe-column type="checkbox" width="60" key="checkbox"></vxe-column>
          <template v-for="item in columns">
            <vxe-column v-if="item.colCfg" :field="item.field" :title="item.title" v-bind="{...item.colCfg}"
                        :key="'_'+item.field">
              <template v-if="item.colCfg.isSlot" v-slot="{row}">
                <slot :name="'col-'+item.field" v-bind="{row}"></slot>
              </template>
              <template v-else-if="item.dictCode" v-slot="{row}">
                {{ CollectionLabel(item.dictCode,row[item.field]) }}
              </template>
            </vxe-column>
            <vxe-column v-else :field="item.field" :title="item.title"
                        :key="'_'+item.field">
            </vxe-column>
          </template>

          <vxe-column field="createTime" width="180" title="创建时间"></vxe-column>
          <vxe-column field="updateTime" width="180" title="编辑时间"></vxe-column>
        </t-table>
      </el-col>
      <!-- 分页条 -->
      <el-col :span="24" style="text-align: center;height: 50px">
        <t-pagination :url="url" :data.sync="tableData" :query-params="extendQueryParam" ref="pagination"/>
      </el-col>
    </el-row>


    <!-- 新增抽屉 -->
    <add-form-drawer :form-desc="formItems" :rules="rules"
                     :visible="isAddDrawer" @close="isAddDrawer=false"
                     :add-url="addUrl"
                     @saveSuccess="saveSuccess"/>
    <!-- 编辑抽屉 -->
    <edit-form-drawer :form-desc="formItems" :rules="rules"
                      :visible="isUpdateDrawer" @close="isUpdateDrawer=false"
                      :update-url="updateUrl" :url-query-by-id="urlQueryById"
                      :row-data="selectRows[0]" :id-prop="idProp"
                      @updateSuccess="updateSuccess"/>
    <!--  详情抽屉  -->
    <detail-form-drawer :visible="isDetailDrawer" @close="isDetailDrawer=false"
                        :form-desc="formDesc" :row-data="selectRows[0]"/>
  </div>
</template>
<!--
表格列：
colCfg:{
  hidden:false,//显示
}
notCol : 不在表格列上展示
notDetail：不在详情抽屉展示
-->


<script>
import addFormDrawer from "../common/components/addFormDrawer";
import editFormDrawer from "../common/components/editFormDrawer";
import detailFormDrawer from "../common/components/detailFormDrawer";
import request from "../../../../utils/request";

export default {
  components: {addFormDrawer, editFormDrawer, detailFormDrawer},
  props: {
    //表单项
    formDesc: {
      type: Object,
      required: true
    },
    //表单校验规则
    rules: {
      type: Object,
    },
    /* 分页请求url */
    url: {
      type: String,
      required: true
    },
    /* 添加请求url */
    addUrl: {
      type: String,
      required: true
    },
    /* 编辑请求url */
    updateUrl: {
      type: String,
      required: true
    },
    /*查询单个url*/
    urlQueryById: {
      type: String,
      required: true
    },
    /*删除请求*/
    urlDeleteByIds: {
      type: String,
      required: true
    },
    /*主键属性*/
    idProp: {
      type: String,
      default: "id"
    },
    /*分页查询参数*/
    extendQueryParam: [Object]
  },
  computed: {
    //表格列
    columns() {
      if (!this.formDesc) return []
      let cols = []
      Object.keys(this.formDesc).forEach(key => {
        const formItem = this.formDesc[key]
        const colCfg = formItem.colCfg
        if (colCfg && colCfg.hidden) return;
        else if (colCfg && !colCfg.hidden) {
          let tmp = {
            field: key,
            title: formItem.label,
            dictCode: formItem.dictCode,
            colCfg
          }
          cols.push(tmp)
        }
      })
      // console.log(cols)
      return cols
    },
    //表单项
    formItems() {
      if (!this.formDesc) return []

      let formItems = {}
      Object.keys(this.formDesc).forEach(key => {
        if (!this.formDesc[key].hidden) formItems[key] = this.formDesc[key]
      })

      Object.keys(formItems).forEach(key => {
        //dictCode
        let dictCode = formItems[key].dictCode;
        if (dictCode) {
          // console.log(dictCode)
          let collectionData = CollectionData(dictCode);
          // console.log(collectionData)
          const options = collectionData.map(item => {
            return {text: item.itemLabel, value: item.itemValue}
          })
          formItems[key].options = options
        }
      })

      return formItems
    }
  },
  data() {
    return {
      /* 表格data */
      tableData: [],
      selectRows: [],
      /* 抽屉 */
      isAddDrawer: false,
      isUpdateDrawer: false,
      isDetailDrawer: false,
    };
  },
  methods: {
    loadTableData() {
      this.$nextTick(() => {
        this.$refs['pagination'].loadTableData()
      })
    },
    selectChangeEvent({records}) {
      this.selectRows = records
    },
    onDelete() {
      const deleteIds = this.selectRows.map(item => {
        return item[this.idProp]
      }).join(",")
      if (!this.urlDeleteByIds) return
      request({
        url: `${this.urlDeleteByIds}`,
        data: {ids: deleteIds},
        method: 'delete',
      }).then(data => {
        this.$message({
          message: '删除成功',
          type: 'success'
        });
        this.loadTableData()
      })
    },
    /* 新增抽屉 */
    openAddDrawer() {
      this.isAddDrawer = true
    },
    saveSuccess() {
      this.isAddDrawer = false
      this.loadTableData()
    },
    /* 修改抽屉 */
    openUpdateDrawer() {
      this.isUpdateDrawer = true
    },
    updateSuccess() {
      this.isUpdateDrawer = false
      this.loadTableData()
    },
    /* 详情抽屉 */
    openDetailDrawer() {
      this.isDetailDrawer = true
    },

  },
  mounted() {
    this.loadTableData()
  },
};
</script>

<style scoped lang="less">
.page {
  /deep/ .el-form {
    /*& > .el-row {
      height: 100%;
    }

    .ele-form-btns {
      //display: inline-block;
      position: absolute;
      bottom: 0px;
    }*/
  }


}
</style>